<template>
  <div class="d-flex">
    <!-- 共计 -->
    <div class="el-pagination__total">共计 {{ total }} 条</div>
    <el-pagination
      v-if="showPageSize"
      class="skeleton-pagination"
      small
      layout="sizes"
      :page-size="max"
      :page-sizes="pageSizeList || [10, 20, 50, 100]"
      @size-change="handleSizeChange"
    ></el-pagination>
    <!-- 第一页 -->
    <!-- <el-button
      class="first-prev"
      :disabled="currentPage === 1"
      @click="handleFistPrev"
    >
      <i class="el-icon-d-arrow-left"></i>
      <v-icon size="16">mdi-page-first</v-icon>
    </el-button> -->
    <!-- 上一页 页码 下一页 -->
    <el-pagination
      class="skeleton-pagination"
      small
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="currentPage"
      :page-size="max"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <!-- 最后一页 -->
    <!-- <el-button
      class="last-next"
      :disabled="currentPage === pages"
      @click="handleLastPage"
    >
      <i class="el-icon-d-arrow-right"></i>
      <v-icon size="16">mdi-page-last</v-icon>
    </el-button> -->
    <!-- 跳页 -->
    <el-pagination
      class="skeleton-pagination"
      small
      background
      layout="jumper"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import "@assets/styles/skeleton-pagination.css";
export default {
  name: "skeleton-pagination",
  props: {
    // * 必填 当前页 [数字]
    currentPage: { type: Number, default: 1 },
    // * 必填 总共有多少条数据 [数字]
    total: { type: Number, default: 1000 },
    // * 必填 总共页数 [数字]
    pages: { type: Number, default: 0 },
    // * 如果 showPageSize 为 true，则为 必填 每页最大值列表: 10 [数字]
    max: {
      type: Number,
      default: 10,
    },

    // 可选 [字符串]
    who: { type: String, default: "" },
    // 可选 每页最大值列表: [10, 20, 50, 100]
    pageSizeList: {
      type: Array,
      default: () => {},
    },
    // 可选 是否显式 pageSize
    showPageSize: { type: Boolean, default: true },
  },
  data() {
    return {
      pagination: {
        page: 1,
        max: 10,
      },
    };
  },
  methods: {
    // 向上提交参数
    handleEmitConfig() {
      this.$emit("paginationInfo", {
        ...this.pagination,
        who: this.who,
      });
    },

    // 页码变化时
    handleCurrentChange(currentPage) {
      this.pagination.page = currentPage;
      // const { pages } = this;
      // console.log(pages);
      // this.pagination.page = currentPage > pages ? pages : currentPage;
      this.handleEmitConfig();
    },
    // 最大页改变时
    handleSizeChange(max) {
      this.pagination.max = max;

      this.handleEmitConfig();
    },

    // 前往第一页
    handleFistPrev() {
      this.pagination.page = 1;

      this.handleEmitConfig();
    },
    // 前往最后一页
    handleLastPage() {
      this.pagination.page = this.pages;

      this.handleEmitConfig();
    },
  },
};
</script>

<style scoped>
.d-flex {
  display: flex;
  justify-content: end;
  align-items: center;
}
</style>
